<template>
  <div
    style="display: flex; justify-content: space-between; margin-bottom: 10px"
  >
    <!-- <div>
      <el-input
        v-model="queryInfo.keyword"
        placeholder="输入关键词查询"
        style="width: 200px; margin-right: 10px"
      ></el-input>
      <el-button type="" @click="getList">查询</el-button>
    </div> -->
  </div>
  <div>
    <el-table :data="goodsList" style="width: 100%" height="450px">
      <el-table-column prop="cover" label="封面图" width="100">
        <template #default="scope">
          <img
            :src="scope.row.cover"
            alt=""
            style="width: 50px; height: 50px"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="goodsName"
        label="商品名称"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          <span class="goods-title" @click="gotoDetail(scope.row)">
            {{ scope.row.goodsName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="评论内容"></el-table-column>
      <el-table-column prop="images" label="图片" width="150">
        <template #default="scope">
          <img
            v-for="(item, index) in scope.row.images"
            :key="index"
            :src="origin + item.url"
            alt=""
            style="width: 50px; height: 50px"
          />
        </template>
      </el-table-column>

      <el-table-column prop="contentTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" v-if="userInfo.role === 1">
        <template #default="scope">
          <!-- <el-button
            type="primary"
            :icon="Edit"
            circle
            @click="showEdit(scope.row)"
          /> -->
          <el-popconfirm
            title="你确定删除吗?"
            @confirm="deleteNormsById(scope.row.id)"
            confirm-button-text="确定"
            cancel-button-text="取消"
          >
            <template #reference>
              <el-button :icon="Delete" circle />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
      />
    </div> -->
  </div>

  <el-dialog
    v-model="dialogVisible"
    :title="type === 'add' ? '添加商品规格' : '编辑商品规格'"
    @close="handleClose"
    width="300px"
  >
    <el-form
      :model="normsForm"
      :rules="formRules"
      label-width="50px"
      style="max-width: 260px"
      ref="normsForm"
    >
      <el-form-item label="名称" prop="title">
        <el-input v-model="normsForm.title"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { ElButton, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus'
</script>

<script>
import dayjs from 'dayjs'
import {
  adderList,
  deleteAdder,
  updateAddress,
  createAdder
} from '../api/address.js'
import {
  getClassificationList,
  delClassification,
  addClassification,
  updateClassification,
  getNormsList,
  deleteNorms,
  createdGoodsNorms,
  editGoodsNorms
} from '../api/goods.js'

import {
  getContent,
  createContent,
  getGoodsContentReplyList,
  getContentReply,
  deleteContent
} from '../api/content.js'
export default {
  data() {
    return {
      origin: 'http://43.136.166.102:8090',
      total: 0,
      queryInfo: {
        keyword: '',
        pageNum: 1,
        pageSize: 10
      },
      userInfo: JSON.parse(window.localStorage.getItem('user_info')),
      dialogVisible: false,
      goodsList: [],
      normsForm: {
        recipientName: '',
        phoneNumber: '',
        address: ''
      },
      type: 'add',
      formRules: {
        recipientName: [
          { required: true, message: '请输入收件人姓名', trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getList()
    },
    showModal() {
      this.dialogVisible = true
      this.normsForm = {}
      this.type = 'add'
    },
    handlePick(value) {
      console.log(value)
      this.normsForm.address = value.map((item) => item.name).join('')
    },
    handleClose() {},
    showEdit(info) {
      this.dialogVisible = true
      this.normsForm = info
      this.type = 'edit'
    },
    deleteNormsById(id) {
      deleteContent(id).then((res) => {
        this.getList()
        ElMessage.success('删除成功！')
      })
    },
    handleSubmit() {
      this.$refs.normsForm.validate((valid) => {
        if (valid) {
          let params = {
            ...this.normsForm
            // createTime: new Date()
          }

          editGoodsNorms({
            id: params.id,
            title: params.title
          }).then((res) => {
            this.dialogVisible = false
            this.getList()
            ElMessage.success('修改成功！')
          })
        }
      })
    },
    getList() {
      getContentReply(this.userInfo.id).then((res) => {
        this.goodsList = res.map((item) => {
          return {
            ...item,
            contentTime: dayjs(item.contentTime).format('YYYY-MM-DD HH:mm:ss')
          }
        })
      })
    },
    handleMessage(event) {
      // 确保只处理来自特定源的消息，以防止安全问题

      const data = event.data
      console.log('Received message from React:', data)
    },
    gotoDetail(row) {
      window.open(`#/goods/${row.goodsId}`)
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    // 监听来自其他系统的消息
    window.addEventListener('message', this.handleMessage)
  },
  beforeDestroy() {
    // 在组件销毁之前移除事件监听器，防止内存泄漏
    window.removeEventListener('message', this.handleMessage)
  }
}
</script>
<style lang="less" scoped>
.adder {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  margin: 20px 0;
  align-items: center;

  .address-name {
    display: flex;
    align-items: center;
  }

  .def-name {
    background: linear-gradient(to right, #ff0000, #fc7544);
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 37px;
    font-size: 22px;
    font-weight: 600;
    margin-right: 10px;
  }
  .no-def-name {
    background: #fff;
    color: #ff0000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 37px;
    font-size: 22px;
    font-weight: 600;
    margin-right: 10px;
    border: 1px solid #ff0000;
  }
}

.el-tab-pane {
  padding: 0 20px;
  padding-left: 40px;
}
</style>
